﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="PAARC.WP7.LightIndicator"
             d:DesignWidth="481"
             d:DesignHeight="481"
             Height="Auto">

    <Grid x:Name="LayoutRoot"
          Background="Transparent"
          SizeChanged="LayoutRoot_SizeChanged">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="StateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.3"
                                      To="Off" />
                    <VisualTransition GeneratedDuration="0:0:0.1"
                                      To="On" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="On" />
                <VisualState x:Name="Off">
                    <Storyboard>
                        <ColorAnimation Duration="0"
                                        To="{StaticResource PhoneDisabledColor}"
                                        Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        Storyboard.TargetName="IndicatorEllipse"
                                        d:IsOptimized="True" />
                        <ColorAnimation Duration="0"
                                        To="#66BEBEBE"
                                        Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                        Storyboard.TargetName="IndicatorEllipse"
                                        d:IsOptimized="True" />
                        <PointAnimation Duration="0"
                                        To="0.634,0.335"
                                        Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)"
                                        Storyboard.TargetName="IndicatorEllipse"
                                        d:IsOptimized="True" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="OffText">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="OnText">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <TextBlock x:Name="OnText"
                   HorizontalAlignment="Left"
                   TextWrapping="Wrap"
                   Text="On"
                   VerticalAlignment="Center"
                   Style="{StaticResource PhoneTextNormalStyle}" />
        <TextBlock x:Name="OffText"
                   HorizontalAlignment="Left"
                   TextWrapping="Wrap"
                   Text="Off"
                   VerticalAlignment="Center"
                   Style="{StaticResource PhoneTextNormalStyle}"
                   Visibility="Collapsed" />
        <Ellipse x:Name="IndicatorEllipse"
                 Grid.Column="1">
            <Ellipse.Stroke>
                <SolidColorBrush Color="{StaticResource PhoneChromeColor}" />
            </Ellipse.Stroke>
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.734,0.187"
                                     RadiusY="0.547"
                                     RadiusX="0.547"
                                     Center="0.533,0.466">
                    <GradientStop Color="{StaticResource PhoneAccentColor}"
                                  Offset="0.545" />
                    <GradientStop Color="White"
                                  Offset="0.097" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</UserControl>